* {
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
html,
body {
	height: 100%;
}

div.test {
	width: 1rem /* 100/100 */;
	height: 1rem /* 100/100 */;
	background-color: red;
}

// body
body {
	display: flex;
	flex-direction: column;
	background: #000d4a url(../imgs/bg.jpeg) center top;
}

// header
header {
	width: 100%;
	height: 105px;
	line-height: 105px;
	background: url(../imgs/head_bg.png) no-repeat center center;
	position: relative;
	text-align: center;
	color: #fff;

	// h1
	h1 {
		font-size: 0.42rem /* 42/100 */;
	}

	span {
		font-size: 0.3rem /* 30/100 */;
		position: absolute;
		right: 0.2rem /* 20/100 */;
		top: -0.1rem;
	}
}

// main
.main {
	flex: 1;
	display: flex;
	justify-content: space-between;
	margin: 0.2rem /* 20/100 */;
	// background-color: red;

	.column {
		width: 22%;
		height: 100%;
		span {
			display: inline-block;
			color: rgba(255, 255, 255, 0.6);
		}
		// background-color:green;

		// .column:nth-of-type(2)
		&:nth-of-type(2) {
			width: 50%;
			height: 100%;
			margin: 0 0.2rem;
			// background-color: blue;
		}

		// box
		.box {
			width: 100%;
			padding: 15px;
			background: rgba(0, 0, 0, 0.2);
			// background-color: yellow;
			margin-bottom: 0.15rem;
		}
	}
	.alltitle {
		height: 24px;
		color: #fff;
		.line {
			display: inline-block;
			width: 5px;
			height: 20px;
			position: relative;
			top: 4px;
			background: #49bcf7;
			border-radius: 20px;
		}
		span {
			color: #fff;
			padding-left: 10px;
		}
	}
	.left {
		.item2 {
			.w1,
			.w4 {
				width: 104px;
			}
			.w2,
			.w3 {
				width: 70px;
			}
			font-size: 18px;
			color: rgba(255, 255, 255, 0.6);
			.alltitle {
				height: 24px;
				color: #fff;
				.line {
					display: inline-block;
					width: 5px;
					height: 20px;
					position: relative;
					top: 4px;
					background: #49bcf7;
					border-radius: 20px;
				}
				span {
					margin-left: 4px;
				}
			}
			.wraptit {
				height: 24px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				padding: 10px 0;
			}

			.wrap {
				overflow: hidden;
				ul {
					position: relative;
					// top: -200px;
					height: 200px;

					li {
						height: 40px;
						span {
							line-height: 40px;
						}
					}
				}
			}
		}
	}
	.mid {
		// height: 100%;
		.item1 {
			display: flex;
			.left {
				flex: 1;
				.top {
					height: 32px;
					padding-top: 14px;
					span {
						display: inline block;
						color: #fff;
						&:nth-of-type(1) {
							font-size: 24px;
						}
						&:nth-of-type(2) {
							font-size: 18px;
						}
					}
				}
				.main {
					// height: 92px;
					border-bottom-color: rgba(255, 255, 255, 0.1);
					border-bottom-style: solid;
					border-bottom-width: 0.995146px;
					border-top-color: rgba(255, 255, 255, 0.1);
					border-top-style: solid;
					border-top-width: 0.995146px;
					box-sizing: border-box;
					color: rgb(254, 240, 0);
					font-size: 80px;
					margin: 18px 0;
					padding: 10px 0;
					font-weight: 700;
					// line-height: 0.92rem /* 92/100 */;
				}
			}
			.right {
				flex: 1;
				display: flex;
				div {
					flex: 1;
				}
			}
		}
	}
	.right {
		.item1,
		.item2 {
			.w1 {
				width: 60px;
			}
			.w2 {
				width: 100px;
			}
			.w3 {
				width: 134px;
			}
			.w4 {
				width: 90px;
			}
			.wraptit {
				height: 34px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				padding: 10px 0;
			}
			.wrap {
				overflow: hidden;
				ul {
					position: relative;
					// top: -200px;
					height: 200px;

					li {
						height: 40px;
						span {
							line-height: 40px;
						}
					}
				}
			}
		}
	}
}
